<template>
  <div class="form-container">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="font-extra-large">用户详情</span>
        <el-button
          style="margin: 0; margin-left: 20px; padding: 3px 0"
          type="text"
          @click="back"
          >返回</el-button
        >
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleVerify(userDetail.uuid)"
          >审核</el-button
        >
      </div>
      <div class="font-medium item">
        <span class="font-title-medium">审核状态: </span>
        <span
          :class="
            userDetail.verifyStatus === 30 ? 'color-success' : 'color-danger'
          "
          >{{ userDetail.verifyStatus | verifyStatusFilter }}</span
        >
        <span style="float: right">
          <span class="font-title-medium">头像:</span>
          <img style="height: 80px" :src="userDetail.avatar" alt="未设置" />
        </span>
      </div>
      <div class="font-medium item">
        <span class="font-title-medium">昵称: </span
        ><span>{{ userDetail.nickname }}</span>
      </div>
      <div class="font-medium item">
        <span class="font-title-medium">账号类型: </span
        ><span>{{ userDetail.role | roleFilter }}</span>
      </div>
      <div class="font-medium item">
        <span class="font-title-medium">工作: </span
        ><span>{{ userDetail.job }}</span>
      </div>
      <div class="font-medium item">
        <span class="font-title-medium">个性签名: </span
        ><span>{{ userDetail.personalSign }}</span>
      </div>
      <div class="font-mediumitem item">
        <span
          ><span class="font-title-medium">性别: </span
          >{{ userDetail.gender | genderFilter }}</span
        >
        <span style="margin-left: 50px"
          ><span class="font-title-medium">年龄: </span
          >{{ userDetail.age }}</span
        >
        <span style="margin-left: 50px"
          ><span class="font-title-medium">受教育水平: </span
          >{{ userDetail.education | educationFilter }}
        </span>
      </div>
      <div class="font-medium item">
        <span class="font-title-medium">地址: </span>
        <span>{{
          userDetail.province + userDetail.city + userDetail.district
        }}</span>
      </div>
      <div class="font-medium item">
        <span
          ><span class="font-title-medium">关注量: </span
          >{{ userDetail.followCount }}</span
        >
        <span style="margin-left: 50px"
          ><span class="font-title-medium">粉丝数: </span
          >{{ userDetail.fansCount }} </span
        ><span style="margin-left: 50px"
          ><span class="font-title-medium">获赞量: </span
          >{{ userDetail.likedCount }}</span
        ><span style="margin-left: 50px"
          ><span class="font-title-medium">播放数: </span
          >{{ userDetail.viewCount }}</span
        ><span style="margin-left: 50px">
          <span class="font-title-medium">视频数: </span
          >{{ userDetail.videoCount }}
        </span>
      </div>
      <div class="font-medium item color-main">
        <b>兴趣标签：</b>
        <el-tag effect="dark" size="small" style="margin-left: 20px;" v-for="(item, index) in userDetail.interestTags" :key="index">
          {{item.name}}
        </el-tag>
      </div>
    </el-card>
    <el-dialog title="审核" :visible.sync="verifyDialogVisible" width="30%">
      <el-form :model="verifyForm" label-width="80px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="verifyForm.verifyStatus" size="medium">
            <el-radio :label="30">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="verifyForm.detail"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleVerifySubmit" size="small"
          >确 定</el-button
        >
        <el-button @click="verifyDialogVisible = false" size="small"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserDetail, updateVerifyStatus } from "@/api/user";
const defaultUserDetail = {
  uuid: null,
  role: null,
  nickname: null,
  integration: null,
  growth: null,
  job: null,
  personalSign: null,
  avatar: null,
  gender: null,
  age: null,
  education: null,
  province: null,
  city: null,
  district: null,
  interestTags: [],
  followCount: null,
  fansCount: null,
  likedCount: null,
  viewCount: null,
  readCount: null,
  videoCount: null,
};
export default {
  data() {
    return {
      userDetail: Object.assign({}, defaultUserDetail),
      verifyDialogVisible: false,
      verifyForm: {
        uuids: [],
        verifyStatus: 30,
        detail: "",
      },
    };
  },
  created() {
    this.queryUserDetail();
  },
  filters: {
    verifyStatusFilter(verifyStatus) {
      if (verifyStatus === 30) {
        return "已通过";
      } else if (verifyStatus === 0) {
        return "未通过";
      } else if (verifyStatus === 10) {
        return "审核中";
      }
    },
    roleFilter(role) {
      if (role === 0) {
        return "注册用户";
      } else if (role === 1) {
        return "实名用户";
      } else if (role === 2) {
        return "测试账户";
      }
    },
    genderFilter(gender) {
      if (gender === 0) {
        return "女";
      } else if (gender === 1) {
        return "男";
      } else {
        return "未知";
      }
    },
    educationFilter(education) {
      // todo 为减少结构调整，这里写死
      // 优化方向：后端获取枚举列表
      if (education === 0) {
        return "小学";
      } else if (education === 1) {
        return "初中";
      } else if (education === 2) {
        return "高中";
      } else if (education === 3) {
        return "大专";
      } else if (education === 4) {
        return "本科";
      } else if (education === 5) {
        return "硕士";
      } else if (education === 6) {
        return "博士";
      } else {
        return "未知";
      }
    },
  },
  methods: {
    queryUserDetail() {
      getUserDetail(this.$route.query.uuid).then((response) => {
        this.userDetail = response.data;
      });
    },
    back() {
      // 返回上级
      this.$router.back();
    },
    handleVerify(uuid) {
      this.verifyDialogVisible = true;
      this.verifyForm.uuids = [uuid];
    },
    handleVerifySubmit() {
      let params = new URLSearchParams();
      params.append("uuids", this.verifyForm.uuids);
      params.append("verifyStatus", this.verifyForm.verifyStatus);
      params.append("detail", this.verifyForm.detail);
      updateVerifyStatus(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
        this.verifyDialogVisible = false;
        this.queryUserDetail();
      });
    },
  },
};
</script>

<style>
.item {
  margin-bottom: 18px;
}
</style>